<template>
  <div id="setbanner">
    <fieldset class="layui-elem-field layui-field-title">
      <legend>上传LOGO</legend>
      <div class="logobox">
        <img :src="pageConfig.logoSrc" alt="">
      </div>
      <el-button id="uploaderlogo" type="primary" @click="uplogo">点击上传</el-button>
    </fieldset>
    <fieldset class="layui-elem-field layui-field-title">
      <legend>菜单设置</legend>
      <draggable class="dragbox" :list="list" element="div" :options="{animation: 300}">
        <transition-group tag="ul" name="list-complete">
          <li class="list-complete-item" v-for="(item,index) in list" :key="index">{{item.name}}
            <i class="el-icon-edit edit" @click="edit(index)"></i>
            <i class="el-icon-circle-close del" @click="del(index)"></i>
          </li>
        </transition-group>
      </draggable>
      <el-button @click="addmenu(true)">添加菜单</el-button>
    </fieldset>
    <el-button @click="save" type="primary">保存</el-button>
    <el-button @click="cancel">取消</el-button>
    <transition name="fade">
      <div class="callsponsor" v-show="menubox">
        <transition name="move">
          <div class="box" v-show="menubox">
            <p v-cloak>{{boxtitle}}</p>
            <i class="el-message-box__close el-icon-close close" @click="addmenu(false)"></i>
            <div class="content">
              <div class="h">菜单标题：</div>
              <div class="h">
                <el-input v-model="menudata.name" placeholder="请输入菜单标题"></el-input>
              </div>
              <div class="h">菜单类型：</div>
              <div class="h">
                <el-radio-group v-model="menudata.type" @change="clear">
                  <el-radio-button label="system">内置</el-radio-button>
                  <el-radio-button label="custom">自定义</el-radio-button>
                </el-radio-group>
              </div>
              <div class="h">菜单内容：</div>
              <div class="h" v-if="menudata.type =='custom'">
                <el-checkbox v-model="menudata.newpage">打开新页面</el-checkbox>
                <el-input v-model="menudata.url" placeholder="请输入链接地址"></el-input>
              </div>
              <div class="h" v-if="menudata.type =='system'">
                <el-radio v-model="menudata.url" label="/Event/Sponsor/Member" border>会员</el-radio>
                <el-radio v-model="menudata.url" label="/Event/Sponsor/AboutUs" border>关于我们</el-radio>
                <el-radio v-model="menudata.url" label="/Event/publish/create" border>发布活动</el-radio>
              </div>
              <div class="note">{{note}}</div>
            </div>
            <div class="bottombox">
              <el-button @click="addmenu(false)">取消</el-button>
              <el-button @click="submit" type="primary">确定</el-button>
            </div>
          </div>
        </transition>
      </div>
    </transition>
  </div>
</template>

<script>
  function deepCopy(p, c) {
    var c = c || {};
    for (var i in p) {
      if (typeof p[i] === 'object' && p[i] !== null) {
        c[i] = (p[i].constructor === Array) ? [] : {};
        deepCopy(p[i], c[i]);
      } else {
        c[i] = p[i];
      }
    }
    return c;
  }
  import draggable from 'vuedraggable'
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    // props: ["bandata"],
    data: function () {
      return {
        // list: this.$store.state.pageConfig.navList,
        menubox: false,
        type: 0, //0:添加;1:修改;
        editIndex: 0,
        menudata: {
          name: "",
          newpage: false,
          type: "system",
          url: "http://",
        },
        note: ""
      }
    },
    mounted() {
      var that = this;
      window.fileUploader.create("#uploaderlogo", {
        callback: function (dataUrls) {
          that.setPageConfig({
            theme: that.themeName,
            key: 'logoSrc',
            value: dataUrls[0]
          })
          // that.bandata.LogoSrc = dataUrls[0];
        }
      });
    },
    computed: {
      ...mapState([
        "pageConfig",
        "parameters"
      ]),
      themeConfig() {
        return this.pageConfig[this.pageConfig.theme]
      },
      themeName() {
        return this.pageConfig.theme
      },
      list() {
        return this.pageConfig.navList
      },
      boxtitle() {
        return this.type == 0 ? "添加菜单" : "设置菜单"
      }
    },
    methods: {
      ...mapMutations([
        'setPageConfig',
        'cancelEdit'
      ]),
      uplogo() {
        var that = this;
        window.fileUploader.create("#uploaderlogo", {
          mode: "single",
          rightNow: "true",
          callback: function (dataUrls) {
            that.setPageConfig({
              key: 'logoSrc',
              value: dataUrls[0]
            })
          }
        })
      },
      cancel: function () {
        this.cancelEdit();
      },
      save: function () {
        this.$store.dispatch('save')
      },
      addmenu(bol) {
        if (bol) {
          this.menudata = {
            name: "",
            type: "system",
            url: "http://",
          }
        }
        this.type = 0;
        this.note == "";
        this.menubox = bol;
      },
      clear(a) {
        if (a == "system") {
          this.menudata.url = "";
        } else {
          this.menudata.url = "http://";
        }
      },
      del(index) {
        let l = this.list;
        l.splice(index, 1);
        this.setPageConfig({
          key: "navList",
          value: l
        });
      },
      edit(index) {
        let l = this.list;
        this.editIndex = index;
        this.type = 1;
        this.menudata = deepCopy(l[index]);
        this.note == "";
        this.menubox = true;
      },
      submit() {
        if (this.menudata.name == "") {
          this.note = "提示：请输入菜单标题";
          return false
        } else if (this.menudata.url == "") {
          this.note = "提示：请选择菜单内容";
          return false
        }
        let l = this.list;
        if (this.type == 0) {
          l.push(deepCopy(this.menudata));
        } else {
          l.splice(this.editIndex, 1, deepCopy(this.menudata))
        }
        this.setPageConfig({
          key: "navList",
          value: l
        });
        this.addmenu(false);
      }
    },
    components: {
      draggable,
    }
  }
</script>

<style scoped lang="less">
  .logobox {
    margin: 10px 0 15px;
    img {
      height: 50px;
    }
  }

  .dragbox {
    padding: 10px 12px 5px;
    ;
    .list-complete-item {
      background: #ecf1f4;
      padding: 10px 10px;
      margin-bottom: 5px;
      cursor: ns-resize;
      transition: all 1s;
      position: relative;
      .del {
        color: #F56C6C;
        position: absolute;
        font-size: 18px;
        top: 11px;
        right: 11px;
        cursor: pointer;
      }
      .edit {
        color: #409EFF;
        position: absolute;
        font-size: 18px;
        top: 11px;
        right: 38px;
        cursor: pointer;
      }
    }
  }

  .callsponsor {
    background: rgba(0, 0, 0, .5);
    transition: width 0.5s;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 2001;
    .box {
      text-align: left;
      display: inline-block;
      vertical-align: middle;
      background-color: #fff;
      width: 600px;
      border-radius: 3px;
      font-size: 16px;
      overflow: hidden;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      background: #fff;
      position: relative;
      p {
        padding: 20px 20px 0;
      }
      .content {
        padding: 20px;
        .h {
          padding: 5px 0;
        }
        .note {
          padding: 5px 0;
          color: #409EFF;
        }
      }
      .bottombox {
        padding: 10px 20px 15px;
        text-align: right;
      }
    }
    .close {
      position: absolute;
      top: 19px;
      right: 20px;
      font-size: 13px;
      color: #999;
    }
  }

  .callsponsor:after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
  }

  .fade-enter-active,
  .fade-leave-active,
  .move-enter-active,
  .move-leave-active {
    transition: all .4s
  }

  .fade-enter,
  .fade-leave-to {
    opacity: 0
  }

  .move-enter,
  .move-leave-to {
    transform: translateY(-20px);
  }
</style>